Zoom - Info

En xyberneticos nos muestran un bonito efecto que nos permite añadir una imagen con texto oculto que se muestra al pasar el cursor.

Para el ejemplo he añadido una imagen pero el autor ha creado una galería, es posible añadir cualquier número de imágenes siempre que tengamos en cuenta que la suma del ancho de las imágenes no sea superior al espacio donde vamos a añadirlo.

La galería del autor la podemos conseguir de la siguiente forma.
Si estamos utilizando jQuery seguramente ya tenemos añadido el siguiente script en nuestra plantilla, de no tenerlo lo añadimos antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Y a continuación el siguiente:

<script type='text/javascript'>
$(document).ready(function()
{
 $(&#39;.galleryImage&#39;).hover(
  function()
  {

  $(this).find(&#39;img&#39;).animate(
                { width:100,
                  marginTop:10,
                  marginLeft:10
                }, 500);

   },
   function()
   {

    $(this).find(&#39;img&#39;).animate(
                 {width:325,
                  marginTop:0,
                  marginLeft:0
                },300);

   });
});
</script>

Los estilos los añadimos antes de ]]></b:skin>

.galleryContainer
{
width: 1024px; /*  Ancho del contenido */ 
}
.galleryImage {   /* Las imágenes */ 
     background-color:black;
     width:325px;
     height:260px;
     overflow:hidden;
     margin:5px;
     float:left;
}
.info{   /*  Texto adicional */ 
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{  /* Títulos */ 
color:gray;
}
.info p {
color:white;
}
.clear {
clear:both;
margin-top:10px;
}

Una vez tenemos añadido lo anterior guardamos los cambios y en un gadget de HTML incluimos las imágenes y el texto:

<div class="galleryContainer">
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
</div>